<template>
	<div class="container">

		<query-builder v-model="query" @update:modelValue="handleChange">
			<template #default="{scope}">
				<el-cascader popper-class="custom-cascader" v-model="scope.field" :options="options" placeholder="请选择"
					@change="handleCascaderChange($event, scope)" size="small" style="width: 180px; margin-right: 10px;"
					:clearable="true" :show-all-levels="true" :props="cascaderProps"></el-cascader>
				<el-select v-model="scope.operator" size="small" style="width: 100px; margin-right: 10px">
					<el-option label="等于" value="equal" />
					<el-option label="不等于" value="notEqual" />
					<el-option label="在区间" value="between" />
					<el-option label="不在区间" value="not between" />
				</el-select>
				<el-input v-model="scope.value" size="small" style="width: 200px; margin-right: 10px" />
			</template>
		</query-builder>
		<pre class="output">{{ formattedQuery }}</pre>
	</div>
</template>

<script>
	import QueryBuilder from './QueryBuilder.vue'

	export default {
		components: {
			QueryBuilder
		},
		data() {
			return {
				cascaderProps: {
					lazy: false,
					emitPath: false,
					lazyLoad(node, resolve) {

					},
				},

				options: [{
						value: 'js',
						label: '客户信息',
						children: [{
								value: 'Customer_Customer.ctm_name',
								label: '事业部',
								type: 'string',
							}, {
								value: 'Customer_Customer.ctm_name',
								label: '客户姓名',
								type: 'string',
							},
							{
								value: 'Customer_Customer.ctm_code',
								label: '客户卡号'
							},
							{
								value: 'Customer_Customer.ctm_sex',
								label: '客户性别' // W M 男 女
							},
							{
								value: 'Customer_Customer.ctm_code',
								label: '所属顾问'
							},
							{
								value: 'Customer_Customer.ctm_code',
								label: '所属开发'
							},
							{
								value: 'Customer_Customer.ctm_code',
								label: '信息来源'
							},
							{
								value: 'Customer_Customer.ctm_code',
								label: '介绍人'
							},
						]
					},
					{
						value: 'zj',
						label: '分诊记录',
						children: [{
							value: 'hz',
							label: '分诊日期'
						}],
					},
					{
						value: 'zj',
						label: '收款记录',
						children: [{
								value: 'hz',
								label: '付款日期'
							}, {
								value: 'hz',
								label: '产品信息',
								children: [{
									value: 'hz',
									label: '产品名称'
								}, {
									value: 'hz',
									label: '产品类目',
								}, {
									value: 'hz',
									label: '所属套餐',
								}]
							},
							{
								value: 'nb',
								label: '实收金额'
							},
							{
								value: 'wz',
								label: '划扣金额',
								type: 'dec',
							}
						]
					},
					{
						value: 'zj',
						label: '划扣记录',
						children: [{
								value: 'hz',
								label: '划扣日期'
							}, {
								value: 'hz',
								label: '产品信息',
								children: [{
									value: 'hz',
									label: '产品类目',
								}, {
									value: 'hz',
									label: '产品名称',
								}, {
									value: 'hz',
									label: '所属套餐',
								}]
							},
							{
								value: 'nb',
								label: '划扣金额'
							},
							{
								value: 'wz',
								label: '划扣次数',
							}
						]
					},
					{
						value: 'zj',
						label: '订购明细',
						children: [{
							value: 'hz',
							label: '订购时间'
						}, {
							value: 'wz',
							label: '订购产品',
							type: 'dec',
							children: [{
								value: 'hz',
								label: '产品名称'
							}, {
								value: 'hz',
								label: '产品类目'
							}]
						}]
					}, {
						value: 'zj',
						label: '计算字段',
						children: [{
							value: 'wz',
							label: '营业日期',
							type: 'dec',
						}, {
							value: 'wz',
							label: '累计实收',
							type: 'dec',
						}, {
							value: 'wz',
							label: '累计介绍',
							type: 'dec',
						}]
					}
				],
				query: {
					condition: 'and',
					rules: [{
							field: 'Customer_Customer.ctm_name',
							operator: 'equal',
							value: 'Nancy',
						},
						{
							condition: 'and',
							rules: [{
								field: '',
								operator: 'equal',
								daterange: {
									field: '日期',
									operator: '>',
									value: 'USA',
								},
								value: 'USA',
							}]
						}
					]
				}
			}
		},
		computed: {
			formattedQuery() {
				return JSON.stringify(this.query, null, 2)
			}
		},
		methods: {
			handleChange(newQuery) {
				console.log('Query changed:', newQuery)
			},
			handleCascaderChange(value, scope) {
				scope.field = value;
			}
		}
	}
</script>

<style>
	.container {
		max-width: 800px;
		margin: 20px auto;
		padding: 20px;
	}

	.output {
		margin-top: 20px;
		padding: 10px;
		background: #f5f7fa;
		border-radius: 4px;
		white-space: pre-wrap;
	}

	/*


*/

	.custom-cascader {
		display: flex;
		flex-direction: column;

	}

	.custom-cascader .el-cascader-menu {
		min-height: 250px;
	}
</style>
